<template>
  <div v-if="dialogVisible" v-loading="loading">
    <el-dialog
      :width="miniscreen ? '25%' : width"
      :visible.sync="dialogVisible"
      :custom-class="miniscreen ? 'mini-dialog' : customClass"
      top="0"
      :fullscreen="fullscreen"
      @open="open"
      @opend="opened"
      @close="close"
      @closed="closed"
      :destroy-on-close="destroyOnClose"
      :before-close="beforeClose"
      :close-on-click-modal="closeOnClickModal"
      :show-close="false"
      :isShowBtn="isShowBtn"
      :modal="modal"
      :append-to-body="appendToBody"
    >
      <div slot="title" class="dialog-header">
        <div class="title" v-if="title">{{ title }}<slot name="tip"></slot></div>
        <slot name="custom-title" v-else></slot>
        <div class="icons">
          <template v-if="isShowIcon">
            <i class="el-icon-minus" @click="handleMiniScreen" v-if="!miniscreen"></i>
            <i
              :class="miniscreen ? 'el-icon-top-right' : 'el-icon-bottom-left'"
              @click="handleFullScreen(false)"
              v-if="fullscreen || miniscreen"
            ></i>
            <i class="el-icon-full-screen" @click="handleFullScreen(true)" v-if="!fullscreen"></i>
          </template>
          <i v-if="isShowCloseIcon" class="el-icon-close" @click="closeDialog"></i>
        </div>
      </div>
      <div class="dialog-body" v-show="!miniscreen" :style="isShowBtn ? '' : 'padding-bottom: 0'">
        <div class="slot" :style="isShowBtn ? '' : 'height: 100%;padding-bottom: 20px'">
          <slot></slot>
        </div>
        <div class="btns" v-if="isShowBtn"></div>
      </div>
      <template v-if="$slots.footer && !miniscreen">
        <div slot="footer" class="dialog-footer">
          <slot name="footer"></slot>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'GDialog',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '80%'
    },
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    customClass: {
      type: String,
      default: ''
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    beforeClose: {
      type: Function,
      default: () => {}
    },
    isShowIcon: {
      type: Boolean,
      default: true
    },
    isShowBtn: {
      type: Boolean,
      default: false
    },
    modal: {
      type: Boolean,
      default: true
    },
    appendToBody: {
      type: Boolean,
      default: true
    },
    isFullScreen: {
      type: Boolean,
      default: false
    },
    isShowCloseIcon: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      miniscreen: false,
      fullscreen: false
    };
  },
  watch: {
    dialogVisible: function (val) {
      this.miniscreen = false;
      this.handleFullScreen(this.isFullScreen);
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        return this.$emit('update:visible', val);
      }
    }
  },
  methods: {
    //点击自定义的关闭按钮
    closeDialog() {
      this.dialogVisible = false;
      this.beforeClose(() => {
        this.dialogVisible = false;
      });
    },
    open() {
      this.$emit('open');
    },
    opened() {
      this.$emit('opened');
    },
    close() {
      this.$emit('close');
    },
    closed() {
      this.$emit('closed');
    },
    handleFullScreen(bool) {
      this.miniscreen = false;
      this.fullscreen = bool;
    },
    handleMiniScreen() {
      this.miniscreen = true;
      this.fullscreen = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none !important;
}
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  .el-dialog__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0 !important;
    .dialog-body {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      padding-bottom: 64px;

      .slot {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex: 1;
        padding: 0 20px 0 20px;
        overflow: auto;
      }
      .btns {
        position: absolute;
        bottom: 0;
        height: 56px;
        width: 100%;
        background-color: #f7f8fa;
        border-top: 1px solid #e6e6e6;
      }
    }
  }
  .dialog-header {
    .title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
  }
}
::v-deep .el-dialog.is-fullscreen {
  height: 100vh;
  max-height: 100vh;
  left: 0 !important;
  top: 0 !important;
}

.icons {
  position: absolute;
  right: 15px;
  top: 15px;
  img {
    width: 14px;
    height: 14px;
    cursor: pointer;
  }
  i {
    cursor: pointer;
    font-size: 18px;
    color: #6a778c;
    font-weight: 600;
  }
}

::v-deep .mini-dialog {
  position: absolute;
  height: auto;
  left: 24px;
  bottom: 24px;
}

::v-deep .el-dialog {
  pointer-events: auto !important;
}
</style>
